<!-- 商户管理 -->
<template>
  <div>
    <titleWrap :queryFormConfig="queryFormConfig" :queryFormData="queryFormData" :add="add" :labelWidth="labelWidth">
      <div slot="btn">
        <el-button type="primary" size="mini" @click="handleQuery">筛选</el-button>
        <el-button size="mini" @click="reset">清空筛选</el-button>
      </div>
      <!-- <div slot="add" class="add">
        <el-button size="mini" @click="handleClick" type="primary">添加商户</el-button>
      </div>-->

      <myTable :tableConfig="tableConfig" :pagination="pagination" @paginationQuery="paginationQuery">
        <!-- 门店logo -->
        <template #logoImage="{ row }">
          <img :src="row.logoImage" alt style="width:60px;height:60px;border-radius:3px;" />
        </template>

        <!-- 出让比例 -->
        <template #discountRatio="{ row }">
          <span>{{ row.discountRatio }}%</span>
        </template>

        <!-- 是否启用 -->
        <template #status="{ row }">
          <el-switch v-model="row.status" @change="updateMerchant(row)" :active-value="activeStatus"
            :inactive-value="inactiveStatus"></el-switch>
        </template>

        <!-- 操作 -->
        <template #operation="{ row }">
          <div>
            <span class="operate" @click="goDetail(row.id)">详情</span>
            <!-- <span class="operate" @click="viewRecords(row.id)">查看商户流水</span> -->
          </div>
        </template>
      </myTable>
    </titleWrap>
  </div>
</template>

<script>
import list from "./pca-code";
import { formatTreeForCascader } from "@/utils/index";
import { getCommonOptions } from "@/api/common";
import { queryPaged, updateMerchant } from "@/api/merchantManagement";
export default {
  components: {},
  data() {
    return {
      labelWidth: "65px",
      add: true,
      activeStatus: 1,
      inactiveStatus: 0,
      queryFormConfig: [
        {
          label: "商户名称",
          prop: "name",
          type: "input",
          enter: this.handleQuery
        },
        {
          label: "行业类别",
          prop: "industryCategory",
          type: "select",
          options: [],
          change: this.handleQuery
        },
        {
          label: "经营地区",
          prop: "area",
          type: "cascader",
          options: formatTreeForCascader(list),
          change: this.handleQuery
        },
        {
          label: "联系电话",
          prop: "legalTel",
          type: "input",
          enter: this.handleQuery
        },
        {
          label: "法人姓名",
          prop: "legalName",
          type: "input",
          enter: this.handleQuery
        },
        {
          label: "开户银行",
          prop: "bankName",
          type: "input",
          enter: this.handleQuery
        },
        {
          label: "银行账号",
          prop: "accountNum",
          type: "input",
          enter: this.handleQuery
        },
        {
          label: "启用状态",
          prop: "status",
          type: "select",
          options: [
            { description: "全部", dataCode: "" },
            { description: "已启用", dataCode: 1 },
            { description: "未启用", dataCode: 0 }
          ],
          change: this.handleQuery
        },
        {
          label: "商户编码",
          prop: "code",
          type: "input",
          enter: this.handleQuery
        },
        { label: "", slotName: "btn" }
      ],
      queryFormData: {
        industryCategory: "",
        status: ""
      },
      tableConfig: {
        showIndex: false,
        loading: false,
        selection: false,
        data: [],
        columns: [
          { label: "门店logo", slot: "logoImage" },
          { label: "商户编码", prop: "code" },
          { label: "商户名称", prop: "name" },
          { label: "行业类别", prop: "industryCategory" },
          { label: "经营地区", prop: "area", width: 180 },
          { label: "联系电话", prop: "legalTel" },
          { label: "法人姓名", prop: "legalName" },
          { label: "开户银行", prop: "bankName" },
          { label: "银行账号", prop: "accountNum" },
          { label: "让利比例", slot: "discountRatio" },
          { label: "是否启用", slot: "status" },
          { label: "操作", slot: "operation" }
        ]
      },
      pagination: {
        page: 1,
        limit: 20,
        total: 0
      }
    };
  },
  created() {
    this.getCommonOptions(); // 获取行业类别
    this.handleQuery();
  },
  methods: {
    // 获取行业类别
    getCommonOptions() {
      getCommonOptions("INDUSTRY_CATEGORY").then(res => {
        this.queryFormConfig[1].options = res.data.map(item => ({
          description: item.dmname,
          dataCode: item.dmname
        }));

        this.queryFormConfig[1].options.unshift({
          description: "全部",
          dataCode: ""
        });
      });
    },
    // 查询
    handleQuery(num = 1) {
      if (num != 0) {
        this.pagination = {
          page: 1,
          limit: 20,
          total: 0
        };
      }
      this.tableConfig.loading = true;
      if (this.queryFormData.area) {
        this.queryFormData.province = this.queryFormData.area[0];
        this.queryFormData.city = this.queryFormData.area[1];
        this.queryFormData.county = this.queryFormData.area[2];
      } else {
        this.queryFormData.province = "";
        this.queryFormData.city = "";
        this.queryFormData.county = "";
      }
      queryPaged({
        ...this.queryFormData,
        pageIndex: this.pagination.page,
        pageSize: this.pagination.limit,
        sortBy: 1
      })
        .then(res => {
          const { data, flag } = res;
          this.tableConfig.loading = false;
          this.tableConfig.data = data.map(item => {
            const { province, city, county } = item;
            if (province && city && county) {
              item.area = province + "/" + city + "/" + county;
            }
            return item;
          });
          this.pagination.total = flag;
        })
        .catch(res => {
          this.tableConfig.loading = false;
        });
    },
    paginationQuery(val) {
      this.pagination.page = val.page;
      this.handleQuery(0);
    },
    // 重置
    reset() {
      this.queryFormData = {
        industryCategory: "",
        status: ""
      };
      this.handleQuery();
    },
    handleClick() {
      this.$router.push("/merchantManagement/addMerchant");
    },
    // 跳转详情
    goDetail(id) {
      this.$router.push({
        path: "/merchantManagement/merchantDetail",
        query: { id: id }
      });
    },
    // 编辑
    update(id) {
      this.$router.push({
        path: "/merchantManagement/merchantUpdate",
        query: { id: id }
      });
    },
    // 查看商户流水
    viewRecords(id) {
      this.$router.push({
        path: "/merchantManagement/merchantRecords",
        query: { id: id }
      });
    },
    // 是否启用
    updateMerchant(row) {
      updateMerchant({ id: row.id, status: row.status }).then(res => {
        this.toast("操作成功", "success");
        this.handleQuery();
      });
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .queryForm {
  position: relative;

  .add {
    position: absolute;
    right: 50px;
    bottom: 20px;
  }
}
</style>